<template>
  <div>
    <Form
      ref="formData"
      :model="formData"
      :rules="formDataRules"
      :label-width="140"
    >
      <Card title="新增标签" dis-hover class="ivu-mt">
        <Row>
          <Col span="18" offset="2">
            <FormItem label="标签名称" prop="labelName">
              <Input
                v-model="formData.labelName"
                placeholder="请输入标签名称"
              ></Input>
            </FormItem>
          </Col>
          <Col span="18" offset="2">
            <FormItem label="标签类型" prop="labelType">
              <Select v-model="formData.labelType" filterable>
                <Option
                  v-for="item in labelTypeList"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
          </Col>
          <Col span="18" offset="2">
            <FormItem label="商品图角标">
              <Upload
                name="img"
                :maxSize="10240"
                :defaultList="formData.nameImgs"
                :maxLen="1"
                :format="['jpg', 'jpeg', 'png']"
                @handleChangeImage="changeNameImg"
              >
              </Upload>
            </FormItem>
          </Col>
          <Col span="18" offset="2">
            <FormItem label="商品名称角标">
              <Upload
                name="img"
                :maxSize="10240"
                :defaultList="formData.subscriptImgs"
                :maxLen="1"
                :format="['jpg', 'jpeg', 'png']"
                @handleChangeImage="changeSubscriptImg"
              >
              </Upload>
            </FormItem>
          </Col>
          <Col span="18" offset="2">
            <FormItem label="状态：">
              <RadioGroup v-model="formData.state">
                <Radio label="启用"></Radio>
                <Radio label="禁用"></Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="18" offset="2">
            <FormItem label="介绍">
              <Input
                v-model="formData.note"
                type="textarea"
                maxlength="100"
                show-word-limit
                :autosize="{ minRows: 2, maxRows: 5 }"
                placeholder="请输入介绍内容"
              />
            </FormItem>
          </Col>
          <Col span="18" offset="2">
            <FormItem label="">
              <Button
                type="primary"
                :loading="rLoading"
                @click="toRelease(formData)"
                >提交</Button
              >
              <Button @click="goBack" class="ivu-ml">取消</Button>
            </FormItem>
          </Col>
        </Row>
      </Card>
    </Form>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import forms from '@/mixins/dynamicFormAdd'; // 混入通用代码
import Upload from '@/components/common/upload'; // 上传组件

export default {
  mixins: [forms],
  components: { Upload },
  data () {
    return {
      requestApi: {
        // 视情况自定义
        // 新增品牌
        baseAdd: {
          url: '/sysback/label/baseAdd', // 接口地址
          type: 'post' // 接口请求类型
        }
      },
      pickerOptions: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      rLoading: false,
      labelTypeList: [
        { label: '活动标签', value: '1' },
        { label: '服务标签', value: '2' },
        { label: '性能标签', value: '3' }
      ],
      showAreaNames: '',
      salableAreaData: [],
      areaNames: [],
      cityUuids: [],
      productDetailImages: [], // 图片回显
      formData: {
        labelName: '', // 标签名称
        labelType: '', // 标签类型
        state: '启用', // 启用状态1启用2禁用
        subscriptImgs: [],
        subscriptImg: '',
        nameImgs: [],
        nameImg: '',
        note: '' // 介绍
      },
      formDataRules: {
        labelName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          {
            type: 'string',
            min: 2,
            max: 20,
            message:
              '文字最多输入100个字符，最少输入2个字符（汉字、英文字母、标点、数字均算一个字符）',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    // 商品图角标
    changeNameImg (imgArr) {
      this.formData.nameImgs = [imgArr[0].url];
      this.formData.nameImg = imgArr[0].url;
    },
    // 商品名称角标
    changeSubscriptImg (imgArr) {
      this.formData.subscriptImgs = [imgArr[0].url];
      this.formData.subscriptImg = imgArr[0].url;
    },
    toRelease (formData) {
      let stateMap = { 禁用: '2', 启用: '1' };
      formData.state = stateMap[formData.state];
      this.rLoading = true;
      ApiRequest(
        this.requestApi.baseAdd.url,
        this.requestApi.baseAdd.type,
        formData,
        false
      ).then(res => {
        if (res.retStatus === '1') {
          this.$Message.success('新增标签成功!');
          this.$router.go(-1);
        }
        this.rLoading = false;
      });
    },
    goBack () {
      this.$router.go(-1);
    }
  }
};
</script>
